<template>
  <div class="main">
    <div class="header">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        class="enter"
        @click="goin"
        >进入系统</el-button
      >
      <span class="title">三湘银行抢购系统</span>
      <span class="showtime">{{ nowTime }}</span>
    </div>
    <div class="mainbox">
      <!-- 左边 -->
      <div class="column">
        <!-- 图表 -->
        <div class="panel">
          <span class="zhutitle">一周成交金额</span>
          <div class="chart1" id="myChart1"></div>
          <div class="panel-footer"></div>
        </div>
        <!-- 图表 -->
        <div class="panel">
          <span class="zhutitle">通过审核-驳回审核</span>
          <div class="chart2" id="myChart2"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="column2">
        <!-- 数字模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>736482</li>
              <li>8373659275</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>成交总单数</li>
              <li>成交总金额</li>
            </ul>
          </div>
        </div>
        <!-- 地图模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="map-chart"></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="column">
        <!-- 图表 -->
        <div class="panel">
          <span class="zhutitle">待审核申请</span>
          <div class="chart3" id="myChart3"></div>
          <div class="panel-footer"></div>
        </div>
        <!-- 图表 -->
        <div class="panel">
          <span class="zhutitle">管理员负责情况</span>
          <div class="chart4" id="myChart4"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import electronicFont from '../../assets/font/font.css';
import '../../assets/echarts/china.js'
export default {
  data() {
    return {
      nowTime: "",
    };
  },
  created() {
    this.showTimes();
  },
  mounted() {
    this.drawChart1();
    this.drawChart2();
    this.drawChart3();
    this.drawChart4();
  },
  methods: {
    goin() {
      this.$router.replace("guide");
    },
    // 显示当前时间
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "星期" + weeks[week];
      this.nowTime =
        year +
        "年" +
        month +
        "月" +
        date +
        "日" +
        " " +
        hh +
        ":" +
        mm +
        ":" +
        ss +
        " " +
        getWeek;
      // console.log(this.nowTime)
    },
    showTimes() {
      this.timeFormate(new Date());
      setInterval(this.showTimes, 1000);
      // this.clear();
    },
    // clear() {
    //   clearInterval(this.showTimes);
    //   this.nowTime= null;
    // },
    drawChart1() {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(
      //   document.getElementsByClassName("chart1")
      // );
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#2f89cf"],
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            alignWithLabel: true,
          },
          //x轴的颜色和字体大小
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: "12",
          },
          // 不显示x轴的样式
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          //y轴的颜色和字体大小
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: "12",
          },
          // y轴的样式
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              width: 2,
            },
          },
          // y轴分隔线
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "35%",
            itemStyle: {
              barBorderRadius: 5,
            },
          },
        ],
      });
    },
    drawChart2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0%",
          left: "center",
          // bottom: "10%",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        series: [
          {
            name: "申请结果",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 211, name: "申请被驳回" },
              { value: 985, name: "申请通过" },
            ],
          },
        ],
      });
    },
    drawChart3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            alignWithLabel: true,
          },
          //x轴的颜色和字体大小
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: "12",
          },
        },
        yAxis: {
          type: "value",
          //y轴的颜色和字体大小
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: "12",
          },
          // y轴的样式
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              width: 2,
            },
          },
          // y轴分隔线
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            name: "审核数",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      });
    },
    drawChart4() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart4"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0%",
          // bottom: "20%",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            center: ["50%", "56%"],
            data: [
              { value: 1048, name: "陆成杰" },
              { value: 735, name: "张子怡" },
              { value: 580, name: "汤开诚" },
              { value: 484, name: "胡珍燕" },
              { value: 300, name: "张效曹" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
html,
body {
  /* width: 100%;
  height: 100%;
  height: 100vh; */
  /* margin: 0;
  padding: 0; */
  box-sizing: border-box;
}
li {
  list-style: none;
}
.main {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url(../../assets/echarts/bg.jpg) no-repeat center;
  line-height: 1.15;
}
.header {
  position: relative;
  height: 100px;
  background: url(../../assets/echarts/head_bg.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.title {
  color: white;
  font-size: 38px;
  text-align: center;
  line-height: 80px;
}
.showtime {
  position: absolute;
  right: 30px;
  top: 0;
  line-height: 75px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}
.enter {
  position: absolute;
  left: 30px;
  top: 10px;
  background-color: rgba(101, 132, 226, 0.1);
  border: none;
}
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px 10px 0;
  /* background-color: #fff;
  height: 100px; */
}
.column {
  flex: 3;
}
.column2 {
  flex: 5;
  margin: 0 10px 15px;
}
.panel {
  position: relative;
  height: 270px;
  padding: 0 15px 40px;
  margin-bottom: 15px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../../assets/echarts/line.png) rgba(255, 255, 255, 0.03);
  text-align: center;
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.zhutitle {
  /* width: 100%; */
  height: 48px;
  color: #fff;
  line-height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 15px;
}
.no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no-hd::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.no-hd::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.no-hd ul {
  display: flex;
  position: relative;
}
.no-hd ul li {
  flex: 1;
  line-height: 40px;
  font-size: 50px;
  color: #ffeb7b;
  text-align: center;
  font-family: electronicFont;
}
.no-hd ul li::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 50%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.no-bd ul {
  display: flex;
}
.no-bd ul li {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 16px;
  height: 0px;
  line-height: 0px;
  padding-top: 10px;
}
.map {
  position: relative;
  height: 480px;
  /* background: #000; */
}
.map1 {
  width: 518px;
  height: 518px;
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../../assets/echarts/map.png);
  opacity: 0.3;
  background-size: 100% 100%;
}
.map2 {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 643px;
  height: 643px;
  background: url(../../assets/echarts/lbx.png);
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
@keyframes rotate1 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.map3 {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 566px;
  height: 566px;
  background: url(../../assets/echarts/jt.png);
  animation: rotate2 15s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.map-chart {
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: #fff; */
  width: 100%;
  height: 480px;
}
.chart1 {
  width: 100%;
  height: 90%;
  /* background-color: #fff; */
}
.chart2 {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
.chart3 {
  width: 100%;
  height: 90%;
  /* background-color: #fff; */
}
.chart4 {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
</style>